@page "/maps/seat-selection"

@using Syncfusion.Blazor.Maps
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample depicts the zooming and panning options in the maps. You can customize these options by changing the Zooming, Mouse wheel zoom, Pinch zoom, Single-click zoom, and Double-click zoom in the Properties panel.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to zoom and pan the map. The support has been provided for zooming with toolbar, rectangle zoom, pinch zoom, mouse wheel zoom, single-click and double-click zoom.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <div style="width:200px;margin:auto;padding-bottom:20px">
        <img src="images/maps/bus-icon.png" style="width:25px;height:25px;float:left">
        <div style="padding-left:30px;font-size:20px;font-weight:400;">Bus seat selection</div>
    </div>
    <div style="border: 3px solid darkgray;width:200px;display:block;margin:auto;border-radius:5px">
        <img src="images/maps/wheel.png" style="width:30px;height:30px;margin-left:18%;margin-top:10px">

        <div class="control-section">
            <SfMaps Height="400">
                <MapsZoomSettings Enable="false"></MapsZoomSettings>
                <MapsLayers>
                    <MapsLayer ShapeData="@SeatData" GeometryType="GeometryType.Normal" TValue="string">
                        <MapsShapeSettings ColorValuePath="fill">
                        </MapsShapeSettings>
                        <MapsLayerSelectionSettings Enable="true" Opacity="1" EnableMultiSelect="true"></MapsLayerSelectionSettings>
                    </MapsLayer>
                </MapsLayers>
            </SfMaps>
        </div>
    </div>
</div>
<div class="col-lg-3 property-section">
    <table title="Seat Selection" style="width: 100%;font-weight:400 !important">
        <tbody>
            <tr style="height: 30px">
                <td>
                    <div style="height:0;width:15px;padding-bottom:5px;background-color:gray;border-radius:25%"></div>

                    <div style="margin-top: -25px;margin-left: 15px">Available </div>
                </td>
            </tr>
            <tr style="height: 30px">
                <td>
                    <div style="height:0;width:15px;padding-bottom:5px;background-color:Green;border-radius:25%"></div>

                    <div style="margin-top: -25px;margin-left: 15px">Selected</div>
                </td>
            </tr>
            <tr style="height: 30px">
                <td>
                    <div style="height:0;width:15px;padding-bottom:5px;background-color:Orange;border-radius:25%"></div>

                    <div style="margin-top: -25px;margin-left: 15px">Booked</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div>
    <span id='clear-btn'>Clear Selection</span><br />
</div>
<!-- style for bus seat-->
<style>
    #control-container {
        padding: 0px !important;
    }

    #seat-parent {
        text-align: center;
        cursor: pointer
    }

    #selectedseats {
        padding: 10px;
    }

    #selectedseats, #seat-info {
        font-size: 14px;
    }

    #clear-btn {
        padding: 10px;
        border: 2px solid rgb(241, 235, 247);
        border-radius: 8px;
        background: rgb(246, 245, 248);
        color: black;
        font-size: 14px;
    }

    .seats {
        padding-top: 15px;
        font-weight: bold;
    }
</style>
@code {
    public MapDataSettings SeatData = new MapDataSettings
    {
        dataOptions = "data/maps/seat-data.json"
    };

    public class MapDataSettings
    {
        public Boolean async { get; set; }
        public String dataOptions { get; set; }
        public String type { get; set; }
    };
}